<template>
  <BasicCard class="setting-tab">
    <BasicVxeTable v-bind="gridOptions">
      <template #color="{ row }">
        <div style="width: 100px; height: 30px" :style="{ background: row.materialColor }"> </div>
      </template>
    </BasicVxeTable>
  </BasicCard>
</template>
<script setup lang="ts">
  import {
    postWuLiaoJiLv,
    getWuLiaoList,
    postGengXinWuLiao,
    deleteWuLiao,
    postShiFouBeiXiuGai
  } from '@/api/shengChanSheZhi'
  import { columnsSettingThree, columnsSettingFour, columnsSettingTwo } from '../data'
  import dayjs from 'dayjs'
  const props = defineProps<{
    id: string
    name: string
    code: string
  }>()

  //   const { t } = useI18n()

  const handleColumns = () => {
    if (['280', '270', '250'].includes(props.code)) {
      // 抓棉 开棉 混棉
      return columnsSettingThree
    } else if (['240', '220', '160', '130'].includes(props.code)) {
      // 梳棉 预并 末并 粗纱
      return columnsSettingFour
    } else {
      return columnsSettingTwo
    }
  }

  const gridOptions = reactive<BasicGridProps>({
    extraConfig: {
      title: '',
      isCustom: false,
      isExport: true,
      isFilterAndSort: false
    }, // 拓展的配置
    id: `material-setting-${props.name}`, // id用于缓存,务必配置
    maxHeight: '100%',
    loading: true,
    columns: handleColumns(),
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: `物料设定-${props.name}`
    }
  })

  const danWeiList = [
    {
      value: '1',
      label: 'g/Km'
    },
    {
      value: '10',
      label: 'g/100m'
    },
    {
      value: '100',
      label: 'g/10m'
    },
    {
      value: '200',
      label: 'g/5m'
    },
    {
      value: '1000',
      label: 'g/m'
    },
    {
      value: '2',
      label: '根/cm'
    }
  ]
  const searchVal = ref('')
  const getList = () => {
    getWuLiaoList(props.id, searchVal.value)
      .then((res: any) => {
        gridOptions.loading = false
        res
          .sort((a, b) => {
            return Date.parse(b.creationTime) - Date.parse(a.creationTime)
          })
          .forEach((value) => {
            value.processName = props.name
            value.creationTime =
              value.creationTime == null
                ? null
                : dayjs(value.creationTime).format('YYYY-MM-DD HH:mm')
            value.lastModificationTime =
              value.lastModificationTime == null
                ? null
                : dayjs(value.lastModificationTime).format('YYYY-MM-DD HH:mm')
            let name = value.surName == null ? '' : value.surName
            value.lastModificationTime = value.lastModificationTime + ' / ' + name
            for (let item of danWeiList) {
              if (item.value == value.weightPerLengthUnit) {
                value.weightPerLengthUnit = item.label
              }
            }
          })

        gridOptions.data = res
      })
      .catch(() => {
        gridOptions.loading = false
      })
  }

  console.log(props.id)
  onMounted(() => {
    getList()
  })
</script>
<style scoped lang="scss">
  .setting-tab {
    height: calc(100vh - 300px);
  }

  .art-table-card {
    height: 100%;
  }
</style>
